<template>
  <div class="whitepaper-container">
    <!-- 上部标题区 -->
    <div class="header-section">
      <div>
        <el-button
            type="text"
            @click="goBack"
            class="back-btn"
            style="background-color: #fff; padding: 8px 6px; border-radius: 4px; border: 1px solid #e6e6e6; width: 80px;"
        >
          <img
              src="@/assets/images/icon_back.png"
              alt="返回"
              style="width: 12px; vertical-align: middle; margin-right: 8px;"
          >
          <span style="color: #0C1124;">返回</span>
        </el-button>
      </div>
      <div>
        <el-form ref="projectForm" :model="projectForm" label-width="180px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="编号" prop="id">
                <el-input v-model="projectForm.id" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="项目名称" prop="whitePaperName">
                <el-input v-model="projectForm.whitePaperName" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业名称" prop="orgName">
                <el-input v-model="projectForm.orgName" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所在行业" prop="industry">
                <el-input v-model="projectForm.industry" disabled/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>

    <!-- 下部三栏内容区 -->
    <div class="content-section">
      <!-- 左侧大纲 -->
      <div class="left-column">
        <div class="column-header">
          <span>白皮书大纲</span>
        </div>
        <el-tree
            ref="outlineTree"
            :data="outlineData"
            node-key="id"
            :props="defaultProps"
            default-expand-all
            :highlight-current="true"
            :expand-on-click-node="false"
            @node-click="handleNodeClick">
          <span class="tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span v-if="node.level === 3" class="node-summary">
              {{ data.summary || '暂无概述' }}
            </span>
          </span>
        </el-tree>
      </div>

      <!-- 中间内容 -->
      <div class="middle-column">
        <div class="column-header">调研分析</div>
        <div class="content-display">
          <div v-if="selectedContent" class="content-text">
            {{ selectedContent }}
          </div>
          <div v-else class="empty-tip">
            请从左侧大纲选择内容查看
          </div>
        </div>
      </div>

      <!-- 右侧汇编 -->
      <div class="right-column">

        <div class="column-header">
          <div>内容汇编</div>
        </div>
        <div class="rich-text-container" ref="editor"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { projectTree,getProject } from "@/api/whitepaper/project"
import Quill from 'quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import {Loading, Message} from "element-ui";
import {blobValidate, tansParams} from "@/utils/ruoyi";
import errorCode from "@/utils/errorCode";
import service from "@/utils/request";

export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入内容...'
    }
  },
  data() {
    return {
      quill: null,
      whitePaperName: '',
      outlineData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      selectedContent: '',
      outlineId: null,
      projectForm: {}
    }
  },
  mounted() {
    this.initEditor()
  },
  beforeDestroy() {
    if (this.quill) {
      this.quill = null
    }
  },
  created() {
    // this.whitePaperName = this.$route.query.whitePaperName
    this.getInfo(this.$route.query.id);
    this.getWhitePaperInfo(this.$route.query.id)
  },
  methods: {
    goBack() {
      this.$router.push({ path: '/index'})
    },
    getInfo(id) {
      getProject(id).then(res => {
        this.projectForm = res.data
      })
    },
    initEditor() {
      const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],
        ['blockquote', 'code-block'],
        [{ 'header': 1 }, { 'header': 2 }],
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'script': 'sub' }, { 'script': 'super' }],
        [{ 'indent': '-1' }, { 'indent': '+1' }],
        [{ 'direction': 'rtl' }],
        [{ 'size': ['small', false, 'large', 'huge'] }],
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
        [{ 'color': [] }, { 'background': [] }],
        [{ 'font': [] }],
        [{ 'align': [] }],
        ['clean']
      ]

      this.quill = new Quill(this.$refs.editor, {
        theme: 'snow',
        placeholder: this.placeholder,
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {} // 禁用默认图片处理
          }
        }
      })

      // 设置初始值
      if (this.value) {
        this.quill.clipboard.dangerouslyPasteHTML(this.value)
      }

      // 监听内容变化
      this.quill.on('text-change', () => {
        const html = this.$refs.editor.querySelector('.ql-editor').innerHTML
        this.$emit('input', html)
      })
    },
    getWhitePaperInfo(id) {
      projectTree({id:id}).then(res => {
        if (res.code === 200) {
          this.outlineData = res.data
        }
      })
    },
    handleNodeClick(data) {
      if (data.level === 3 && data.content) {
        this.selectedContent = data.content
        this.outlineId = data.id

        // 汇编内容有值则带入汇编内容，否则带入AI调研结果内容
        if (data.finalContent) {
          this.value = data.finalContent
        } else {
          this.value = data.content
        }
      }
    },
    handleManageTasks() {
      this.$router.push({ path: '/whitepaper/form',query:{projectId:this.$route.query.id,whitePaperName:this.whitePaperName} })
    },
    downloadFile() {
      this.download('/system/project/generatePdf', {id:this.$route.query.id}, this.whitePaperName + '.pdf')
    }
  },
  watch: {
    value(newVal) {
      if (newVal !== this.quill?.root.innerHTML) {
        this.quill.clipboard.dangerouslyPasteHTML(newVal)
      }
    }
  }
}
</script>

<style scoped>
.whitepaper-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
}

/* 上部标题区样式 */
.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
}

.page-title {
  font-size: 22px;
  font-weight: bold;
  color: #303133;
}

.manage-btn {
  width: 160px;
}

/* 下部内容区样式 */
.content-section {
  display: flex;
  height: calc(100% - 100px);
  gap: 20px;
}

.left-column, .middle-column, .right-column {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 15px;
  box-sizing: border-box;
}

.left-column {
  width: 28%;
  display: flex;
  flex-direction: column;
}

.middle-column {
  width: 34%;
}

.right-column {
  width: 38%;
  display: flex;
  flex-direction: column;
}

.column-header {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.control-buttons .el-button {
  padding: 0 5px;
  font-size: 12px;
}

.tree-node {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.node-summary {
  font-size: 12px;
  color: #909399;
  margin-left: 10px;
  flex: 0 0 60%;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-display {
  height: calc(100% - 40px);
  padding: 10px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  overflow-y: auto;
}

.content-text {
  line-height: 1.6;
  white-space: pre-wrap;
}

.empty-tip {
  color: #c0c4cc;
  text-align: center;
  padding-top: 50px;
}

.compile-btn {
  margin-top: 10px;
  width: 100%;
}

.rich-text-container {
  height: 100%;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

/* 深度修改Quill内部样式 */
.rich-text-container >>> .ql-editor {
  min-height: 200px;
  padding: 12px 15px;
}

.rich-text-container >>> .ql-toolbar {
  padding: 8px 0;
  border-bottom: 1px solid #ebeef5;
}

.back-btn {
  margin-bottom: 10px;
}
</style>
